<template>
  <el-select
    style="width: 100%"
    v-model="currencyVal"
    clearable
    filterable
    placeholder="请选择货币"
    :multiple="multiple"
    v-bind="$attrs"
  >
    <el-option
      v-for="item in currency"
      :key="item.value"
      :label="item.label"
      :value="item.label"
    />
  </el-select>
</template>

<script setup>
import { getCurrency } from "@/api/public";

const props = defineProps({
  modelValue: { type: [String, Number, Array], default: "" },
  multiple: { type: Boolean, default: false },
  defaultCurrency: { type: Boolean, default: true },
});

const emit = defineEmits(["update:modelValue", "change"]);
const currency = ref([]);
const currencyVal = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit("update:modelValue", val);
    emit("change", val);
  }
});

onMounted(getStorehouse);

async function getStorehouse() {
  try {
    const res = await getCurrency();
    currency.value = res?.data || [];
    if (!props.modelValue && props.defaultCurrency) {
      currencyVal.value = currency.value.find(item => item.label === "CNY")?.label || null;
    }
  } catch (e) {
    console.error("获取货币列表失败:", e);
  }
}
</script>